<template>
  <el-dialog
    :visible.sync="openExpressionDialog"
    :fullscreen="true"
    :show-close="false">
    <div style="
          border-bottom: 1px solid rgb(232,232,232);
          position: absolute;
          top: 0; left: 0;
          height: 70px; width: 100%;
          line-height: 70px; padding-left: 20px; padding-right: 20px;">
      <span style="font-weight: bold; font-size: 20px;">{{ title }}</span>

      <div style="float:right;">
        <el-button plain icon="el-icon-close" @click="openExpressionDialog = false"></el-button>
      </div>

    </div>

    <div style="margin: 40px 40px 70px 40px;">
      <el-card class="box-card" style="margin-bottom: 20px;" v-show="expressionList.length > 0">
        <div slot="header" class="clearfix">
          <span>{{ title }}</span>
        </div>

        <span>例：${day>2}</span>
        <el-input v-model="expression" placeholder="请输入表达式"></el-input>

        <span style="margin-top: 10px; display: block;">可用参数</span>
        <el-tag v-for="(expression, index) in expressionList" :key="index" style="margin-right: 10px;">
          {{ expression.label + ': ' + expression.key }}
        </el-tag>
      </el-card>
    </div>

    <div style="background-color: white;
        border-top: 1px solid rgb(232,232,232);
        position: absolute;
        bottom: 0; left: 0;
        height: 70px; width: 100%;
        line-height: 70px; padding-left: 20px; padding-right: 20px;">
      <div style="float:right; margin: 17px;">
        <el-button type="primary" style="float: right" @click.native="handleProcessInstance()">提交</el-button>
        <el-button plain style="float: right; margin-right: 20px;" @click="openExpressionDialog = false">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "expression",
  data(){
    return {
      openExpressionDialog: false,
      title: '',
      property: null,
      propertyName: null,
      expressionList: [],
      commandStack: null,
      element: null,

      expression: '',
    }
  },
  methods: {
    handleProcessInstance(){
      if(this.commandStack && this.element && this.property){
        let value = this.expression
        const element = this.element
        this.commandStack.execute('element.updateModdleProperties', {
          element,
          moddleElement: this.property,
          properties: {
            body: value
          }
        });
        this.openExpressionDialog = false
      }
    }
  }
}
</script>

<style scoped>

</style>
